﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserInterface3.aspx.cs" Inherits="AjaxApp.UserInterface3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">

        function ajaxCall(userName) {

            var xmlhttp = null;
            alert("ready to make ajax call");
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            var url = "Server3.aspx?q=" + userName;

            // This is not asynchronous (because of the "false").
            xmlhttp.open("GET", url, false);
            xmlhttp.send(null);

            // Not Asynchronous means it waits here until the reponse comes in.
            alert("got a response");
            document.getElementById("serverResponse").innerHTML = xmlhttp.responseText;
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        What is your name? <input id="user_name" type="text" />

        <input id="Button1" type="button" value="Calling Server3.aspx.cs" 
        onclick="ajaxCall(document.forms[0]['user_name'].value);" />

        This example takes user input and calls Server3 that searches a database.
        <br />
        Respose from Server: &nbsp;<span id="serverResponse"></span>
    </div>
    </form>
</body>
</html>